$("#yiqing_data_block_out").attr("style", "display:none;"); //隐藏div
$("#yiqing_data_block_in").attr("style", "display:block;"); //显示div

$("#now").attr("style", "display:block;");
$("#all").attr("style", "display:none;");
$("#map2").attr("style", "display:none;"); //隐藏div
$("#map1").attr("style", "display:block;"); //显示div

$("#font1").attr("style","display:block");
$("#font2").attr("style","display:none");
$("#font11").attr("style","display:block");
$("#font22").attr("style","display:none");

$("#chart1").attr("style", "display:block;"); //显示div
$("#chart1_left").attr("style", "display:block;"); //显示div
$("#chart2").attr("style", "display:none;"); //隐藏div
$("#chart1_mid").attr("style", "display:none;"); //隐藏div
$("#chart1_right").attr("style", "display:none;"); //隐藏div

$(".tt").attr("style", "display:block;"); //隐藏div
$("#in_ttt").attr("style", "display:block;");
$("#out_ttt").attr("style", "display:none;");
$('#M_Gn').click(function () {
    /* 1:自己的子元素span元素，添加一个class属性，其数据为active */
    $("#yiqing_in span").attr("class", "active");
    /* 2：另外一个span元素的classs属性要去掉 */
    $("#yinqing_out span").attr("class", "");
    $("#news span").attr("class", "");


    $("#yiqing_data_block_out").attr("style", "display:none;"); //隐藏div
    $("#yiqing_data_block_in").attr("style", "display:block;"); //显示div
    $("#map2").attr("style", "display:none;"); //隐藏div
    $("#map1").attr("style", "display:block;"); //显示div

    $("#chart1").attr("style", "display:block;"); //显示div
    $("#chart2").attr("style", "display:none;"); //隐藏div

    $(".tt").attr("style", "display:block;"); //隐藏div
})

$('#M_Gw').click(function () {
    /* 1:自己的子元素span元素，添加一个class属性，其数据为active */
    $("#yiqing_in span").attr("class", "");
    /* 2：另外一个span元素的classs属性要去掉 */
    $("#yinqing_out span").attr("class", "active");
    $("#news span").attr("class", "");
    $("#yiqing_data_block_out").attr("style", "display:block;"); //隐藏div
    $("#yiqing_data_block_in").attr("style", "display:none;"); //显示div

    $("#map1").attr("style", "display:none;"); //隐藏div
    $("#map2").attr("style", "display:block;"); //显示div
    $("#out_now").attr("style", "display:block;");
    $("#out_all").attr("style", "display:none;");

    $("#chart1").attr("style", "display:none;"); //显示div
    $("#chart2").attr("style", "display:block;"); //隐藏div
    $("#chart2_mid").attr("style", "display:none;"); //隐藏div
    $("#chart2_right").attr("style", "display:none;"); //隐藏div
    $("#chart2_left").attr("style", "display:block;"); //显示div
    $(".tt").attr("style", "display:none;"); //隐藏div
})

$('#M_Ss').click(function () {
        /* 1:自己的子元素span元素，添加一个class属性，其数据为active */
    $("#yiqing_in span").attr("class", "");
    /* 2：另外一个span元素的classs属性要去掉 */
    $("#yinqing_out span").attr("class", "");
    $("#news span").attr("class", "active");
})

/* JQ部分 */
$("#yiqing_in").click(function () {
    /* 1:自己的子元素span元素，添加一个class属性，其数据为active */
    $("#yiqing_in span").attr("class", "active");
    /* 2：另外一个span元素的classs属性要去掉 */
    $("#yinqing_out span").attr("class", "");
    $("#news span").attr("class", "");


    $("#yiqing_data_block_out").attr("style", "display:none;"); //隐藏div
    $("#yiqing_data_block_in").attr("style", "display:block;"); //显示div
    $("#map2").attr("style", "display:none;"); //隐藏div
    $("#map1").attr("style", "display:block;"); //显示div

    $("#chart1").attr("style", "display:block;"); //显示div
    $("#chart2").attr("style", "display:none;"); //隐藏div

    $(".tt").attr("style", "display:block;"); //隐藏div
})
$("#yinqing_out").click(function () {
    /* 1:自己的子元素span元素，添加一个class属性，其数据为active */
    $("#yiqing_in span").attr("class", "");
    /* 2：另外一个span元素的classs属性要去掉 */
    $("#yinqing_out span").attr("class", "active");
    $("#news span").attr("class", "");
    $("#yiqing_data_block_out").attr("style", "display:block;"); //隐藏div
    $("#yiqing_data_block_in").attr("style", "display:none;"); //显示div

    $("#map1").attr("style", "display:none;"); //隐藏div
    $("#map2").attr("style", "display:block;"); //显示div
    $("#out_now").attr("style", "display:block;");
    $("#out_all").attr("style", "display:none;");

    $("#chart1").attr("style", "display:none;"); //显示div
    $("#chart2").attr("style", "display:block;"); //隐藏div
    $("#chart2_mid").attr("style", "display:none;"); //隐藏div
    $("#chart2_right").attr("style", "display:none;"); //隐藏div
    $("#chart2_left").attr("style", "display:block;"); //显示div
    $(".tt").attr("style", "display:none;"); //隐藏div
})

$("#lab_left").click(function () {
    /* 1 被点击的按钮，处于选中状态：添加属性为“lab_left active” */
    $("#lab_left").attr("class", "lab_left active");
    /* 2 另外一个变成是未被选中 class=“lab_right” */
    $("#lab_right").attr("class", "lab_right");
    $("#now").attr("style", "display:block;");
    $("#all").attr("style", "display:none;");
    $("#font1").attr("style", "display:block;");
    $("#font2").attr("style", "display:none;");
});
$("#lab_right").click(function () {
    /* 1 被点击的按钮，处于选中状态：添加属性为“lab_right active” */
    $("#lab_right").attr("class", "lab_right active");
    /* 2 另外一个变成是未被选中 class=“lab_left” */
    $("#lab_left").attr("class", "lab_left");
    $("#now").attr("style", "display:none;");
    $("#all").attr("style", "display:block;");
    $("#font1").attr("style", "display:none;");
    $("#font2").attr("style", "display:block;");
});
$("#lab_left1").click(function () {
    /* 1 被点击的按钮，处于选中状态：添加属性为“lab_left active” */
    $("#lab_left1").attr("class", "lab_left active");
    /* 2 另外一个变成是未被选中 class=“lab_right” */
    $("#lab_right1").attr("class", "lab_right");
    $("#out_now").attr("style", "display:block;");
    $("#out_all").attr("style", "display:none;");
    $("#font11").attr("style", "display:block;");
    $("#font22").attr("style", "display:none;");
});
$("#lab_right1").click(function () {
    /* 1 被点击的按钮，处于选中状态：添加属性为“lab_right active” */
    $("#lab_right1").attr("class", "lab_right active");
    /* 2 另外一个变成是未被选中 class=“lab_left” */
    $("#lab_left1").attr("class", "lab_left");
    $("#out_now").attr("style", "display:none;");
    $("#out_all").attr("style", "display:block;");
    $("#font11").attr("style", "display:none;");
    $("#font22").attr("style", "display:block;");
});


$("#chart1_lab_left").click(function () {
    /* 1 被点击的按钮，处于选中状态：添加属性为“lab_right active” */
    $("#chart1_lab_left").attr("class", "chart_lab active1");
    /* 2 另外一个变成是未被选中 class=“lab_left” */
    $("#chart1_lab_mid").attr("class", "chart_lab");
    $("#chart1_lab_right").attr("class", "chart_lab");
    $("#chart2").attr("style", "display:none;");
    $("#chart1").attr("style", "display:block;");
    $("#chart1_left").attr("style", "display:block;");
    $("#chart1_mid").attr("style", "display:none;");
    $("#chart1_right").attr("style", "display:none;");
});
$("#chart1_lab_mid").click(function () {
    /* 1 被点击的按钮，处于选中状态：添加属性为“lab_right active” */
    $("#chart1_lab_mid").attr("class", "chart_lab active1");
    /* 2 另外一个变成是未被选中 class=“lab_left” */
    $("#chart1_lab_left").attr("class", "chart_lab");
    $("#chart1_lab_right").attr("class", "chart_lab");
    $("#chart2").attr("style", "display:none;");
    $("#chart1").attr("style", "display:block;");
    $("#chart1_mid").attr("style", "display:block;");
    $("#chart1_left").attr("style", "display:none;");
    $("#chart1_right").attr("style", "display:none;");
});
$("#chart1_lab_right").click(function () {
    /* 1 被点击的按钮，处于选中状态：添加属性为“lab_right active” */
    $("#chart1_lab_right").attr("class", "chart_lab active1");
    /* 2 另外一个变成是未被选中 class=“lab_left” */
    $("#chart1_lab_mid").attr("class", "chart_lab");
    $("#chart1_lab_left").attr("class", "chart_lab");
    $("#chart2").attr("style", "display:none;");
    $("#chart1").attr("style", "display:block;");
    $("#chart1_right").attr("style", "display:block;");
    $("#chart1_mid").attr("style", "display:none;");
    $("#chart1_left").attr("style", "display:none;");
});
$("#chart2_lab_left").click(function () {
    /* 1 被点击的按钮，处于选中状态：添加属性为“lab_right active” */
    $("#chart2_lab_left").attr("class", "chart_lab active1");
    /* 2 另外一个变成是未被选中 class=“lab_left” */
    $("#chart2_lab_mid").attr("class", "chart_lab");
    $("#chart2_lab_right").attr("class", "chart_lab");
    $("#chart1").attr("style", "display:none;");
    $("#chart2").attr("style", "display:block;");
    $("#chart2_left").attr("style", "display:block;");
    $("#chart2_mid").attr("style", "display:none;");
    $("#chart2_right").attr("style", "display:none;");
});
$("#chart2_lab_mid").click(function () {
    /* 1 被点击的按钮，处于选中状态：添加属性为“lab_right active” */
    $("#chart2_lab_mid").attr("class", "chart_lab active1");
    /* 2 另外一个变成是未被选中 class=“lab_left” */
    $("#chart2_lab_left").attr("class", "chart_lab");
    $("#chart2_lab_right").attr("class", "chart_lab");
    $("#chart1").attr("style", "display:none;");
    $("#chart2").attr("style", "display:block;");
    $("#chart2_mid").attr("style", "display:block;");
    $("#chart2_left").attr("style", "display:none;");
    $("#chart2_right").attr("style", "display:none;");
});
$("#chart2_lab_right").click(function () {
    /* 1 被点击的按钮，处于选中状态：添加属性为“lab_right active” */
    $("#chart2_lab_right").attr("class", "chart_lab active1");
    /* 2 另外一个变成是未被选中 class=“lab_left” */
    $("#chart2_lab_mid").attr("class", "chart_lab");
    $("#chart2_lab_left").attr("class", "chart_lab");
    $("#chart1").attr("style", "display:none;");
    $("#chart2").attr("style", "display:block;");
    $("#chart2_right").attr("style", "display:block;");
    $("#chart2_mid").attr("style", "display:none;");
    $("#chart2_left").attr("style", "display:none;");
});
$("#in_tt").click(function () {
    /* 1 被点击的按钮，处于选中状态：添加属性为“lab_right active” */
    $("#in_tt").attr("class", " active1");
    $("#out_tt").attr("class", "");
    /* 2 另外一个变成是未被选中 class=“lab_left” */
    $("#out").attr("class", "");
    $("#in_ttt").attr("style", "display:block;");
    $("#out_ttt").attr("style", "display:none;");

});
$("#out_tt").click(function () {
    /* 1 被点击的按钮，处于选中状态：添加属性为“lab_right active” */
    $("#out_tt").attr("class", " active1");
    $("#in_tt").attr("class", "");
    // /* 2 另外一个变成是未被选中 class=“lab_left” */
    $("#in_tt").attr("class", "");
    $("#in_ttt").attr("style", "display:none;");
    $("#out_ttt").attr("style", "display:block;");


});
// $("#news").click(function () {
//     /* 1:自己的子元素span元素，添加一个class属性，其数据为active */
//     $("#yiqing_in span").attr("class", "");
//     /* 2：另外一个span元素的classs属性要去掉 */
//     $("#yinqing_out span").attr("class", "");
//     $("#news span").attr("class", "active");
//
//
//
// });
$(window).scroll(function(){
    // 每次滚动时判断滚动条的高度是否超过200px
    //如果没有超过，就回到顶部隐藏
    var scrolltop=$(window).scrollTop();
    if(scrolltop>=200){
        $(".totop").css("display","block");
    }else{
        $(".totop").css("display","none");
    }
});
$(".totop").click(function(){
    window.location.href="#head_content";
});

//数据显示国内
$.ajax({
    url: "/record/getData",
    type: 'get',
    dataType: 'json',
    success: function (data) {
        // console.log(data)

        $("#update_time").html("<span>" + data.lastUpdateTime + "</span>")

        //新增确诊1
        $(".add_con").html("<span>" + data.add_con + "</span>")

        //新增无症状1
        $("#add_no").html("<span>" + data.add_no + "</span>")
        //现有确诊1
        $("#now_con").html("<span>" + data.now_con + "</span>")

        //现有无症状1
        $("#now_no").html("<span>" + data.now_no + "</span>")
        // 累计确诊1
        $("#con").html("<span>" + data.con + "</span>")
        // 累计境外1
        $("#out").html("<span>" + data.out + "</span>")
        //累计治愈1
        $("#recover").html("<span>" + data.recover + "</span>")
        //累计死亡1
        $("#dead").html("<span>" + data.dead + "</span>")
        $(".add_dead").html("<span>" + data.add_dead + "</span>")
        $(".add_recover").html("<span>" + data.add_recover + "</span>")
        $(".add_out").html("<span>" + data.add_out + "</span>")


    }
})


//数据显示国外
$.ajax({
    url: "/record/getData2",
    type: 'get',
    dataType: 'json',
    success: function (data) {
        // console.log(data)

        $("#out_update_time").html("<span>" + data.lastUpdateTime + "</span>")


        $("#out_con").html("<span>" + data.con + "</span>")


        $("#add_con").html("<span>" + data.add_con + "</span>")

        $("#out_out").html("<span>" + data.out_now_con + "</span>")
        $("#add_out").html("<span>" + data.add_out_now_con + "</span>")


        $("#out_recover").html("<span>" + data.recover + "</span>")

        $("#add_recover").html("<span>" + data.add_recover + "</span>")

        $("#out_dead").html("<span>" + data.dead + "</span>")
        $("#add_dead").html("<span>" + data.add_dead + "</span>")


    }
})


// 现有确诊
let resultData2 = []
$.ajax({
    type: "get",
    url: "/record/getMap2",
    success: function (msg) {
        resultData2 = msg;
        // console.log(msg)
        // console.log(resultData2)

        // 基于准备好的dom，初始化echarts实例
        var myChart2 = echarts.init(document.getElementById('now'));

        myChart2.showLoading();

        $.get("json/full.json", function (geoJson) {

            myChart2.hideLoading();

            echarts.registerMap('china', geoJson);

            myChart2.setOption(option = {

                tooltip: {
                    trigger: 'item',
                    triggerOn: 'click',
                    enterable: true,//鼠标是否可进入提示框浮层中

                    showDelay: 0,//显示延时，添加显示延时可以避免频繁切换
                    hideDelay: 50,//隐藏延时
                    transitionDuration: 0,//动画变换时长

                    backgroundColor: 'rgba(50, 50, 50, 0.7)',//背景颜色（此时为默认色）
                    borderRadius: 8,//边框圆角
                    paddingLeft: 13,
                    paddingRight: 20,
                    paddingBottom: 1,
                    paddingTop: 1,

                    formatter: formatterHover//修改鼠标悬停显示的内容
                },

                visualMap: {
                    type: 'piecewise',
                    pieces: [{
                        min: 1000,
                        max: 1000000,
                        label: '大于等于1000人',
                        color: '#372a28'
                    },
                        {
                            min: 500,
                            max: 999,
                            label: '确诊500-999人',
                            color: '#4e160f'
                        },
                        {
                            min: 100,
                            max: 499,
                            label: '确诊100-499人',
                            color: '#974236'
                        },
                        {
                            min: 10,
                            max: 99,
                            label: '确诊10-99人',
                            color: '#ee7263'
                        },
                        {
                            min: 1,
                            max: 9,
                            label: '确诊1-9人',
                            color: '#f5bba7'
                        },
                    ],
                    color: ['#E0022B', '#E09107', '#A3E00B'],
                    inverse: false

                },

                series: [{
                    name: '现有确诊人数',
                    type: 'map',
                    mapType: 'china', // 自定义扩展图表类型
                    label: {
                        show: true
                    },
                    data: resultData2
                }]
            });
        });
    }
});


// 现有确诊国外
let resultData4 = []
$.ajax({
    type: "get",
    url: "/record/getMap4",
    success: function (msg) {
        resultData4 = msg;


        // 基于准备好的dom，初始化echarts实例
        var myChart4 = echarts.init(document.getElementById('out_now'));

        myChart4.showLoading();

        $.get("json/world.json", function (geoJson) {

            myChart4.hideLoading();

            echarts.registerMap('HK', geoJson);

            myChart4.setOption(option = {

                tooltip: {
                    trigger: 'item',
                    triggerOn: 'click',
                    enterable: true,//鼠标是否可进入提示框浮层中

                    showDelay: 0,//显示延时，添加显示延时可以避免频繁切换
                    hideDelay: 50,//隐藏延时
                    transitionDuration: 0,//动画变换时长

                    backgroundColor: 'rgba(50, 50, 50, 0.7)',//背景颜色（此时为默认色）
                    borderRadius: 8,//边框圆角
                    paddingLeft: 13,
                    paddingRight: 20,
                    paddingBottom: 1,
                    paddingTop: 1,

                    formatter: formatterHover//修改鼠标悬停显示的内容
                },

                visualMap: {
                    min: 800,
                    max: 50000,
                    text: ['High', 'Low'],
                    realtime: false,
                    calculable: true,
                    inRange: {
                        color: ['lightskyblue', 'yellow', 'orangered']
                    }
                },
                series: [{
                    name: '现有确诊人数',
                    type: 'map',
                    mapType: 'HK', // 自定义扩展图表类型
                    label: {
                        show: false
                    },
                    data: resultData4
                }]
            });
        });
    }
});


//累计确诊
let resultData1 = []
$.ajax({
    type: "get",
    url: "/record/getMap1",
    success: function (msg) {
        resultData1 = msg;

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('all'));

        myChart.showLoading();

        $.get("json/full.json", function (geoJson) {

            myChart.hideLoading();

            echarts.registerMap('china', geoJson);

            myChart.setOption(option = {

                tooltip: {
                    trigger: 'item',
                    triggerOn: 'click',
                    enterable: true,//鼠标是否可进入提示框浮层中

                    showDelay: 0,//显示延时，添加显示延时可以避免频繁切换
                    hideDelay: 50,//隐藏延时
                    transitionDuration: 0,//动画变换时长

                    backgroundColor: 'rgba(50, 50, 50, 0.7)',//背景颜色（此时为默认色）
                    borderRadius: 8,//边框圆角
                    paddingLeft: 13,
                    paddingRight: 20,
                    paddingBottom: 1,
                    paddingTop: 1,

                    formatter: formatterHover//修改鼠标悬停显示的内容
                },
                visualMap: {
                    min: 800,
                    max: 50000,
                    text: ['High', 'Low'],
                    realtime: false,
                    calculable: true,
                    inRange: {
                        color: ['lightskyblue', 'yellow', 'orangered']
                    }
                },
                series: [{
                    name: '累计确诊人数',
                    type: 'map',
                    mapType: 'china', // 自定义扩展图表类型
                    label: {
                        show: true
                    },
                    data: resultData1
                }]
            });
        });
    }
});


// 国外累计确诊
let resultData3 = []
$.ajax({
    type: "get",
    url: "/record/getMap3",
    success: function (msg) {
        resultData3 = msg;


        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('out_all'));

        myChart.showLoading();

        $.get("json/world.json", function (geoJson) {

            myChart.hideLoading();

            echarts.registerMap('HK', geoJson);

            myChart.setOption(option = {

                tooltip: {
                    trigger: 'item',
                    triggerOn: 'click',
                    enterable: true,//鼠标是否可进入提示框浮层中

                    showDelay: 0,//显示延时，添加显示延时可以避免频繁切换
                    hideDelay: 50,//隐藏延时
                    transitionDuration: 0,//动画变换时长

                    backgroundColor: 'rgba(50, 50, 50, 0.7)',//背景颜色（此时为默认色）
                    borderRadius: 8,//边框圆角
                    paddingLeft: 13,
                    paddingRight: 20,
                    paddingBottom: 1,
                    paddingTop: 1,

                    formatter: formatterHover//修改鼠标悬停显示的内容
                },

                visualMap: {
                    min: 800,
                    max: 50000,
                    text: ['High', 'Low'],
                    realtime: false,
                    calculable: true,
                    inRange: {
                        color: ['lightskyblue', 'yellow', 'orangered']
                    }
                },
                series: [{
                    name: '累计确诊人数',
                    type: 'map',
                    mapType: 'HK', // 自定义扩展图表类型
                    label: {
                        show: false
                    },
                    data: resultData3
                }]
            });
        });
    }
});


// 新增本土趋势
let chartNum1 = [];
let num1 = [];
let values1 = [];
$.ajax({
    type: "get",
    url: "/record/getChartNum1",
    success: function (msg) {
        chartNum1 = msg;
        // console.log(chartNum1)


        for (let i = 0; i < chartNum1.length; i++) {
            num1.push(chartNum1[i].date)
            values1.push(chartNum1[i].value)
        }
        // console.log(num1);
        // console.log(values1);
        var chartDom = document.getElementById('chart1_left');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            xAxis: {
                type: 'category',
                data: num1,
            },
            yAxis: {
                type: 'value',
            },
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove',
                enterable: false,//鼠标是否可进入提示框浮层中

                showDelay: 0,//显示延时，添加显示延时可以避免频繁切换
                hideDelay: 50,//隐藏延时
                transitionDuration: 0,//动画变换时长

                backgroundColor: 'rgba(50, 50, 50, 0.7)',//背景颜色（此时为默认色）
                borderRadius: 8,//边框圆角
                paddingLeft: 13,
                paddingRight: 20,
                paddingBottom: 1,
                paddingTop: 1,

                formatter: formatterHover1//修改鼠标悬停显示的内容
            },
            series: [
                {
                    data: values1,
                    type: 'line',
                    smooth: true,
                    // showSymbol: false,
                    itemStyle: {
                        color: '#FFAA9E'
                    },
                    lineStyle: {
                        width: 1,
                        normal: {
                            color: '#FFAA9E',
                            width: 4,
                        }
                    }
                }
            ]
        };
        option && myChart.setOption(option);
    }
});

//境外输入新增趋势
let chartNum2 = [];
let num2 = [];
let values2 = [];
$.ajax({
    type: "get",
    url: "/record/getChartNum2",
    success: function (msg) {
        chartNum2 = msg;
        for (let i = 0; i < chartNum2.length; i++) {
            num2.push(chartNum2[i].out_date);
            values2.push(chartNum2[i].out_value);
        }
        // console.log(num2);
        // console.log(values2);
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart1_mid'));

        myChart.hideLoading();

        myChart.setOption(option = {
            xAxis: {
                type: 'category',
                data: num2
            },
            yAxis: {
                type: 'value'
            },
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove',
                enterable: false,//鼠标是否可进入提示框浮层中

                showDelay: 0,//显示延时，添加显示延时可以避免频繁切换
                hideDelay: 50,//隐藏延时
                transitionDuration: 0,//动画变换时长

                backgroundColor: 'rgba(50, 50, 50, 0.7)',//背景颜色（此时为默认色）
                borderRadius: 8,//边框圆角
                paddingLeft: 13,
                paddingRight: 20,
                paddingBottom: 1,
                paddingTop: 1,

                formatter: formatterHover1//修改鼠标悬停显示的内容
            },
            series: [
                {
                    data: values2,
                    type: 'line',
                    smooth: true,
                    // showSymbol: false
                }
            ]
        });
    }
});

//境外输入省级TOP10
let chartNum3 = [];
let num3 = [];
let values3 = [];
$.ajax({
    type: "get",
    url: "/record/getChartNum3",
    success: function (msg) {
        // console.log(3);
        chartNum3 = msg;
        // console.log(chartNum3);
        for (let i = 0; i < chartNum3.length; i++) {
            num3.push(chartNum3[i].sus_date);
            values3.push(chartNum3[i].sus_value);
        }
        // console.log(num3);
        // console.log(values3);
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart1_right'));

        myChart.hideLoading();

        myChart.setOption(option = {
            xAxis: {
                data: num3
            },
            yAxis: {},
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove',
                enterable: false,//鼠标是否可进入提示框浮层中

                showDelay: 0,//显示延时，添加显示延时可以避免频繁切换
                hideDelay: 50,//隐藏延时
                transitionDuration: 0,//动画变换时长

                backgroundColor: 'rgba(50, 50, 50, 0.7)',//背景颜色（此时为默认色）
                borderRadius: 8,//边框圆角
                paddingLeft: 13,
                paddingRight: 20,
                paddingBottom: 1,
                paddingTop: 1,

                formatter: formatterHover1//修改鼠标悬停显示的内容
            },
            series: [
                {
                    type: 'line',
                    // showSymbol: false,
                    data: values3
                }
            ]
        });
    }
});

//国外新增确诊趋势
let chartNum4 = [];
$.ajax({
    type: "get",
    // url: "/record/getChartNum4",
    success: function (msg) {
        // console.log(4);
        chartNum4 = msg;
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart2_left'));

        myChart.hideLoading();

        myChart.setOption(option = {
            xAxis: {
                type: 'category',
                data: ['4-24', '4-25', '4-26', '4-27', '4-28', '4-29', '4-30', '5-1', '5-2', '5-3', '5-4', '5-5', '5-6',
                    '5-7', '5-8', '5-9', '5-10', '5-11', '5-12', '5-13', '5-14', '5-15', '5-16', '5-17', '5-18', '5-19', '5-20', '5-21'
                    , '5-22', '5-23', '5-24', '5-25', '5-26', '5-27', '5-28', '5-29', '5-30', '5-31', '6-1', '6-2', '6-3', '6-4', '6-5',
                    '6-6', '6-7', '6-8', '6-9', '6-10', '6-11', '6-12', '6-13', '6-14', '6-15', '6-16', '6-17', '6-18']
            },
            yAxis: {
                type: 'value'
            },
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove',
                enterable: false,//鼠标是否可进入提示框浮层中

                showDelay: 0,//显示延时，添加显示延时可以避免频繁切换
                hideDelay: 50,//隐藏延时
                transitionDuration: 0,//动画变换时长

                backgroundColor: 'rgba(50, 50, 50, 0.7)',//背景颜色（此时为默认色）
                borderRadius: 8,//边框圆角
                paddingLeft: 13,
                paddingRight: 20,
                paddingBottom: 1,
                paddingTop: 1,

                formatter: formatterHover1//修改鼠标悬停显示的内容
            },
            series: [
                {
                    data: [981763, 907317, 828678, 834562, 966787, 985945, 995060, 808486, 601455, 601455, 144817, 144817, 895060, 908486,
                        501455, 701455, 644817, 844817, 718199, 618199, 518199, 518199, 281763, 307317, 628678, 734562, 566787, 285996,
                        895060, 908486, 501455, 701455, 644817, 844817, 718199, 618199, 381763, 407317, 528678, 334562, 666787, 485945,
                        295060, 508486, 601455, 601455, 144817, 144817, 518199, 518199, 281763, 307317, 628678, 734562, 566787, 285996],
                    type: 'line',
                    // showSymbol: false,
                    smooth: true
                }
            ]
        });
    }
});

//国外累计确诊/现有确诊
let chartNum5 = [];
$.ajax({
    type: "get",
    // url: "/record/getChartNum5",
    success: function (msg) {
        // console.log(5);
        chartNum5 = msg;
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart2_mid'));

        myChart.hideLoading();

        myChart.setOption(option = {
            xAxis: {
                data: ['4-24', '4-25', '4-26', '4-27', '4-28', '4-29', '4-30', '5-1', '5-2', '5-3', '5-4', '5-5', '5-6',
                    '5-7', '5-8', '5-9', '5-10', '5-11', '5-12', '5-13', '5-14', '5-15', '5-16', '5-17', '5-18', '5-19', '5-20', '5-21'
                    , '5-22', '5-23', '5-24', '5-25', '5-26', '5-27', '5-28', '5-29', '5-30', '5-31', '6-1', '6-2', '6-3', '6-4', '6-5',
                    '6-6', '6-7', '6-8', '6-9', '6-10', '6-11', '6-12', '6-13', '6-14', '6-15', '6-16', '6-17', '6-18']
            },
            yAxis: {},
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove',
                enterable: false,//鼠标是否可进入提示框浮层中

                showDelay: 0,//显示延时，添加显示延时可以避免频繁切换
                hideDelay: 50,//隐藏延时
                transitionDuration: 0,//动画变换时长

                backgroundColor: 'rgba(50, 50, 50, 0.7)',//背景颜色（此时为默认色）
                borderRadius: 8,//边框圆角
                paddingLeft: 13,
                paddingRight: 20,
                paddingBottom: 1,
                paddingTop: 1,

                formatter: formatterHover1//修改鼠标悬停显示的内容
            },
            series: [
                {
                    data: [468176553, 468176553, 468176553, 468176553, 468176553, 498176553,498176553, 498176553, 498176553, 498176553, 498176553, 498176553,  518176553, 518176553,
                        528176553, 528176553, 518176553, 528176553, 528176553, 528176553, 538176553, 538176553, 538176553, 538176553, 538176553, 538176553,533566787, 533285996
                        , 538176553, 538176553, 538176553, 538176553, 538176553, 538176553,538176553, 538176553, 538176553, 538176553, 538176553, 598165593,  518176553, 518176553,
                        528176553, 528176553, 518176553, 528176553, 528176553, 528176553, 538176553, 538176553, 538176553, 538176553, 538176553, 538176553,533566787, 533285996],
                    type: 'line',
                    // showSymbol: false,
                    stack: 'x'
                },
                {
                    data: [46817655, 46817655, 46817655, 46817655, 46817655, 49817655,49817655, 49817653, 49817653, 49817653, 49817553, 49176553,  51817553, 51876553,
                    52816553, 52876553, 51817553, 52816553, 52816553, 52816553, 53816553, 53816553, 53876553, 53817653, 53817553, 53176553,53366787, 53285996
                    , 53817653, 53817653, 53876553, 53876553, 53176553, 53176553,53816553, 53817553, 53876553, 53816553, 53816553, 53816553,  51817653, 58176553,
                    52817553, 52817553, 58176553, 52816553, 52816553, 52817653, 53816553, 53816553, 53817653, 53816553, 53816553, 53876553,53366787, 53285996],
                    type: 'line',
                    // showSymbol: false,
                    stack: 'x'
                }
            ]
        });
    }
});

//国外治愈/死亡
let chartNum6 = [];
$.ajax({
    type: "get",
    // url: "/record/getChartNum6",
    success: function (msg) {
        // console.log(6);
        chartNum6 = msg;
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart2_right'));

        myChart.hideLoading();

        myChart.setOption(option = {
            xAxis: {
                data: ['4-24', '4-25', '4-26', '4-27', '4-28', '4-29', '4-30', '5-1', '5-2', '5-3', '5-4', '5-5', '5-6',
                    '5-7', '5-8', '5-9', '5-10', '5-11', '5-12', '5-13', '5-14', '5-15', '5-16', '5-17', '5-18', '5-19', '5-20', '5-21'
                    , '5-22', '5-23', '5-24', '5-25', '5-26', '5-27', '5-28', '5-29', '5-30', '5-31', '6-1', '6-2', '6-3', '6-4', '6-5',
                    '6-6', '6-7', '6-8', '6-9', '6-10', '6-11', '6-12', '6-13', '6-14', '6-15', '6-16', '6-17', '6-18']
            },
            yAxis: {},
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove',
                enterable: false,//鼠标是否可进入提示框浮层中

                showDelay: 0,//显示延时，添加显示延时可以避免频繁切换
                hideDelay: 50,//隐藏延时
                transitionDuration: 0,//动画变换时长

                backgroundColor: 'rgba(50, 50, 50, 0.7)',//背景颜色（此时为默认色）
                borderRadius: 8,//边框圆角
                paddingLeft: 13,
                paddingRight: 20,
                paddingBottom: 1,
                paddingTop: 1,

                formatter: formatterHover1//修改鼠标悬停显示的内容
            },
            series: [
                {
                    data: [468176553, 468176553, 468176553, 468176553, 468176553, 498176553,498176553, 498176553, 498176553, 498176553, 498176553, 498176553,  518176553, 518176553,
                        528176553, 528176553, 518176553, 528176553, 528176553, 528176553, 538176553, 538176553, 538176553, 538176553, 538176553, 538176553,533566787, 533285996
                        , 538176553, 538176553, 538176553, 538176553, 538176553, 538176553,538176553, 538176553, 538176553, 538176553, 538176553, 598165593,  518176553, 518176553,
                        528176553, 528176553, 518176553, 528176553, 528176553, 528176553, 538176553, 538176553, 538176553, 538176553, 538176553, 538176553,533566787, 533285996],
                    type: 'line',
                    // showSymbol: false,
                    stack: 'x'
                },
                {
                    data: [468175, 468155, 468655, 467655, 467655, 498655,417655, 417653, 498173, 498153, 498553, 497553,  517553, 516553,
                        528153, 528753, 518553, 528163, 528153, 516553, 538153, 538153, 538553, 538153, 538153, 531753,533667, 532896
                        , 537653, 538653, 538553, 538553, 531553, 531763,538153, 538173, 538553, 538553, 538553, 538153,  518653, 581553,
                        528153, 517553, 581553, 528153, 526553, 527653, 538153, 516553, 538653, 538153, 538153, 538753,533667, 532896],
                    type: 'line',
                    // showSymbol: false,
                    stack: 'x'
                }
            ]
        });
    }
});

function formatterHover(params) {
    var paramsType = params.data.name;
    var paramsValue = params.data.value;
    var paramsNum = params.type;
    return '<div style="  border-space:solid;">'
        // return '<div style="  border-space:solid; white-space: nowrap; padding: 1px 20px 1px 13px; height: 1px ">'
        + '<div style="float: left;">'
        + '<div><span style="color: white">地区：' + paramsType + '</span></div>'
        + '<div><span style="color: white">确诊：' + paramsValue + '</span></div>'
        + '</div>'
        + '<div style="float: left;padding-left: 15px; padding-top: 11.5px;padding-bottom: 11.5px ">' +
        '<a target="_blank" href="https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_aladin_banner&city=' + paramsType + "-" + paramsType + '" style="text-decoration: none; color: white" >详情     > </a>' + '</div>'
        + '</div>';
}

function formatterHover1(params) {
    // console.log('1111:'+params.name);
    var paramsValue = params.data;
    var paramsTime = params.name;
    return '<div style="  border-space:solid;">'
        // return '<div style="  border-space:solid; white-space: nowrap; padding: 1px 20px 1px 13px; height: 1px ">'
        + '<div style="float: left;">'
        + '<div><span style="color: white">' + paramsTime + '</span></div>'
        + '<div><span style="color: white">新增人数：' + paramsValue + '</span></div>'
        + '</div></div>';
}


new Vue({
    el: '#root',
    data() {
        return {
            tables: [],

        }
    },
    created() {
        this.getData();

    },
    methods: {
        getData() {
            var that = this;

            $.ajax({
                type: "get",
                url: "/record/getTable1",
                success: function (msg) {
                    that.tables = msg;

                    // console.log(that.tables);
                    // console.log(msg);

                }
            });


        },






    }
})
addZero = function (num) {
    if (parseInt(num) < 10) {
        num = "0" + num
    }
    return num
}


//把毫秒数转化成具体日期   2021-06-04 00:00:00
//参数 毫秒数
function formatMsToDate (ms) {

    if (ms) {
        var oDate = new Date(ms),

            oYear = oDate.getFullYear(),
            oMonth = oDate.getMonth() + 1,
            oDay = oDate.getDate(),
            oHour = oDate.getHours(),
            oMin = oDate.getMinutes(),
            oSen = oDate.getSeconds(),

            oTime = oYear + '-' + addZero(oMonth) + '-' + addZero(oDay) + ' ' + addZero(oHour) + ':' +
                addZero(oMin) + ':' + addZero(oSen);

        return oTime;
    } else {
        return ""
    }
}addZero = function (num) {
    if (parseInt(num) < 10) {
        num = "0" + num
    }
    return num
}


//把毫秒数转化成具体日期   2021-06-04 00:00:00
//参数 毫秒数
function formatMsToDate (ms) {
    // console.log(new Date(ms))
    if (ms) {
        var oDate = new Date(ms),

            oYear = oDate.getFullYear(),
            oMonth = oDate.getMonth() + 1,
            oDay = oDate.getDate(),
            oHour = oDate.getHours(),
            oMin = oDate.getMinutes(),
            oSen = oDate.getSeconds(),

            oTime = addZero(oMonth) + '月' + addZero(oDay) + '日  ' + addZero(oHour) + ':' +
                addZero(oMin) ;

        return oTime;
    } else {
        return ""
    }
}


//国内疫情资讯
$.ajax({
    type: "get",
    url: "https://opendata.baidu.com/data/inner?tn=reserved_all_res_tn&dspName=iphone&from_sf=1&dsp=iphone&resource_id=28565&alr=1&query=%E5%9B%BD%E5%86%85%E6%96%B0%E5%9E%8B%E8%82%BA%E7%82%8E%E6%9C%80%E6%96%B0%E5%8A%A8%E6%80%81&cb=jsonp_1655371659543_86610",
    jsonp:"jsonp_1655371659543_86610",
    dataType:"jsonp",
    success: function (msg) {


    }
});
function jsonp_1655371659543_86610(data){
    // console.log(data)
    var news=data.Result[0].DisplayData.result.items
    // console.log(news)
    for(var i=0;i<11;i++){
        var date=formatMsToDate(news[i].eventTime*1000);
        // console.log(date);
        var str=" <div  style=\"padding-top: 1.25rem;padding-left: 1.04rem;padding-right: 0;\">\n" +
            "                    <div style=\"position: relative;\">\n" +
            "                <span style=\"position: absolute;left: -.8125rem;top: 0;width: 1px;display: block;height: 7rem;background: #eee;\">\n" +
            "                    <span style=\"margin: 0;padding: 0;position: absolute;top: -.1rem;left: -.5rem;width: 1rem;height: 1rem;background: #fff;\"></span>\n" +
            "                    <span style=\"margin: 0;padding: 0;position: absolute;top: .05rem;left: -.3225rem;width: .375rem;height: .375rem;background: #0faeb5;border-radius: .375rem;border: .1875rem solid #cfeff0;\"></span>\n" +
            "                </span>\n" +
            "                        <div style=\"color: #999;font-size: .875rem;line-height: .875rem;\">\n" +
            "                            <span>"+date+"</span>\n" +
            "                        </div>\n" +
            "                        <div style=\"margin: .625rem 0 1.25rem;\">\n" +
            "                            <div style=\"padding: .5rem .625rem;line-height: 1.625rem;background: #f5f6f7;border-radius: .27rem;font-weight: 700;color: #4d5054;\">\n" +"<a href='"+news[i].eventUrl+"' "+"target='_blank'>"+news[i].eventDescription+"</a>"+

            "                            </div>\n" +
            "                        </div>\n" +
            "                    </div>\n" +
            "\n" +
            "                </div>" ;
        $("#in_ttt").append(str);
    }
}
//国外疫情资讯
$.ajax({
    type: "get",
    url: "https://opendata.baidu.com/data/inner?tn=reserved_all_res_tn&dspName=iphone&from_sf=1&dsp=iphone&resource_id=28565&alr=1&query=%E5%9B%BD%E5%A4%96%E6%96%B0%E5%9E%8B%E8%82%BA%E7%82%8E%E6%9C%80%E6%96%B0%E5%8A%A8%E6%80%81&cb=jsonp_1655371659543",
    jsonp:"jsonp_1655371659543",
    dataType:"jsonp",
    success: function (msg) {


    }
});
function jsonp_1655371659543(data){
    // console.log(data)
    var news=data.Result[0].DisplayData.result.items
    // console.log(news)
    for(var i=0;i<11;i++){
        var date=formatMsToDate(news[i].eventTime*1000);
        // console.log(date);
        var str=" <div  style=\"padding-top: 1.25rem;padding-left: 1.04rem;padding-right: 0;\">\n" +
            "                    <div style=\"position: relative;\">\n" +
            "                <span style=\"position: absolute;left: -.8125rem;top: 0;width: 1px;display: block;height: 7rem;background: #eee;\">\n" +
            "                    <span style=\"margin: 0;padding: 0;position: absolute;top: -.1rem;left: -.5rem;width: 1rem;height: 1rem;background: #fff;\"></span>\n" +
            "                    <span style=\"margin: 0;padding: 0;position: absolute;top: .05rem;left: -.3225rem;width: .375rem;height: .375rem;background: #0faeb5;border-radius: .375rem;border: .1875rem solid #cfeff0;\"></span>\n" +
            "                </span>\n" +
            "                        <div style=\"color: #999;font-size: .875rem;line-height: .875rem;\">\n" +
            "                            <span>"+date+"</span>\n" +
            "                        </div>\n" +
            "                        <div style=\"margin: .625rem 0 1.25rem;\">\n" +
            "                            <div style=\"padding: .5rem .625rem;line-height: 1.625rem;background: #f5f6f7;border-radius: .27rem;font-weight: 700;color: #4d5054;\">\n" +"<a href='"+news[i].eventUrl+"' "+"target='_blank'>"+news[i].eventDescription+"</a>"+

            "                            </div>\n" +
            "                        </div>\n" +
            "                    </div>\n" +
            "\n" +
            "                </div>" ;
        $("#out_ttt").append(str);
    }
}
window.addEventListener('scroll',()=>{
    let header=document.querySelector('header')
    header.classList.toggle('sticky',window.scrollY > 0)
})

